import React from 'react'
import Slider from "react-slick";
import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';


import prev_button from './img/prev_button.png'
import next_button from './img/next_button.png'
import {WeaTools} from "ecCom";

function SamplePrevArrow(props) {
    const {className,style,onClick,id} = props
    return (
        <img src={prev_button} className={`${className} custom-element-view-pre-arrow-${id}`} style={{...style}} onClick={onClick}
             ref={(ref)=>{
                 if(window.elementFollowHideDoms && window.elementFollowHideDoms[id]){
                     window.elementFollowHideDoms[id].push(ref)
                 }else if(!window.elementFollowHideDoms){
                     window.elementFollowHideDoms = {}
                     window.elementFollowHideDoms[id] = []
                     window.elementFollowHideDoms[id].push(ref)
                 }else{
                     window.elementFollowHideDoms[id] = []
                     window.elementFollowHideDoms[id].push(ref)
                 }
             }}
        />
    )
}

function SampleNextArrow(props) {
    const {className,style,onClick,id} = props
    return (
        <img src={next_button}  className={`${className} custom-element-view-next-arrow-${id}`} style={{...style}} onClick={onClick}
             ref={(ref)=>{
                 if(window.elementFollowHideDoms && window.elementFollowHideDoms[id]){
                     window.elementFollowHideDoms[id].push(ref)
                 }else if(!window.elementFollowHideDoms){
                     window.elementFollowHideDoms = {}
                     window.elementFollowHideDoms[id] = []
                     window.elementFollowHideDoms[id].push(ref)
                 }else{
                     window.elementFollowHideDoms[id] = []
                     window.elementFollowHideDoms[id].push(ref)
                 }
             }}
        />
    )
}

export default class ContainerViewExtend extends React.Component{



    handlerImgOnClick = (item,index)=>{
        const {data} = this.props
        const {id,setting}  = data
        const {isEjectImg} = setting
        if(isEjectImg == '0' && item.setting.url){
            window.open(item.setting.url,'_blank')
        }else if(isEjectImg == '1'){
            $(`#images-${id} .image-item-icon-${index}`).click()
        }



    }

    handlerSliderOnLoad = (ref)=>{
        const {data} = this.props
        const {id}  = data
        const tempDom = $(ref).find('.slick-dots')
        if(tempDom.length > 0){
            if(window.elementFollowHideDoms && window.elementFollowHideDoms[id]){
                window.elementFollowHideDoms[id].push(tempDom[0])
            }else if(!window.elementFollowHideDoms){

                window.elementFollowHideDoms = {}
                window.elementFollowHideDoms[id] = []
                window.elementFollowHideDoms[id].push(tempDom[0])
            }else{
                window.elementFollowHideDoms[id] = []
                window.elementFollowHideDoms[id].push(tempDom[0])
            }
        }

    }


    render(){


        const {data,tabId} = this.props
        const {id,setting,items}  = data
        const {showWay,widthType,heightType,isAutoWidth=0,isAutoHeight,layoutType,sliderType,isHasSliderArrow,sliderSpeed,isShowTitle,titleFontSize} = setting
        let content = null
        let viewerImgs = null
        if(items.length > 0){
            let width = setting.width
            let height = setting.height
            let tabConentWidth = $(`#tabcontant_${id}`).width()
            // let tabConentHeight = $(`#tabcontant_${id}`).height()
            let tabConentHeight = parseInt($(`#item_${id}`).height())
            if($(`#header_${id}`).css("display") != 'none'){
                tabConentHeight -= parseInt($(`#header_${id}`).height())
            }
            if($(`#content_${id}`).css("padding-top")){
                tabConentHeight = tabConentHeight - parseInt($(`#content_${id}`).css("padding-top").split('px')[0])
            }else if($(`#content_${id}`).css("padding-bottom")){
                tabConentHeight = tabConentHeight - parseInt($(`#content_${id}`).css("padding-bottom").split('px')[0])
            }
            let imgItemContainerHeight
            let slidesToShow_w
            let slidesToShow_h
            if(layoutType == '1'){
                if(widthType == '1'){
                    slidesToShow_w = parseInt(tabConentWidth/width)
                    width += 'px'
                }else if(widthType == '2'){
                    slidesToShow_w = parseInt(100/width)

                    width = (width/(100/slidesToShow_w))*100 +'%'
                }
                if(heightType == '1'){
                    height += 'px'
                }else if(heightType == '2'){
                    height += '%'
                }
                imgItemContainerHeight = tabConentHeight +'px'
            }else if(layoutType == '2'){
                if(heightType == '1'){
                    slidesToShow_h = parseInt(tabConentHeight/height)
                    imgItemContainerHeight = height +'px'
                    height += 'px'
                }else if(heightType == '2'){
                    slidesToShow_h = parseInt(100/height)
                    imgItemContainerHeight = (tabConentHeight * ((100/slidesToShow_h)/100))+'px'
                    height = (height/(100/slidesToShow_h))*100 +'%'
                }

                if(widthType == '1'){
                    width += 'px'
                }else if(widthType == '2'){
                    width += '%'
                }
            }


            if(showWay == '1'){
                content = (
                    <div className="img-view-extend" style={{'textAlign':'center',height: '100%'}}>
                        <div style={{display: 'inline-block','verticalAlign':'middle',position:'relative',cursor:items[0].setting.url?'pointer':'default',width: isAutoWidth == '0' ? width : 'auto',height: isAutoHeight == '0' ? height : 'auto'}} onClick={()=>{this.handlerImgOnClick(items[0],0)}}>
                            <img style={{display:'inline-block',width: isAutoWidth == '0' ? '100%' : 'auto',height: isAutoHeight == '0' ? '100%' : 'auto'}} src={items[0].setting.img}/>
                            {
                                isShowTitle == '1' ? (
                                    <div className="img-item-title" style={{'fontSize':titleFontSize+'px'}}>{items[0].setting.title}</div>
                                ) : null
                            }
                        </div>
                        <div className="middle-box"></div>
                    </div>
                )
                viewerImgs = (
                    <ul id={`images-${id}`}>

                        <li><img className={`image-item-icon-0`} alt={items[0].setting.name}  src={items[0].setting.img}/></li>

                    </ul>
                )
            }else if(showWay == '2'){
                const settings = {
                    dots: true,
                    infinite: true,
                    speed: 500,
                    pauseOnHover: true,
                    slidesToShow: layoutType == '1' ? slidesToShow_w : slidesToShow_h,
                    slidesToScroll: 1,
                    vertical: layoutType == '2' ? true : false,
                    verticalSwiping: layoutType == '2' ? true : false,
                    // className: "slider variable-width",
                    // variableWidth: true,
                    prevArrow : <SamplePrevArrow ecId={`${this && this.props && this.props.ecId || ''}_SamplePrevArrow@n2r2d0`} id={id}/>,
                    nextArrow : <SampleNextArrow ecId={`${this && this.props && this.props.ecId || ''}_SampleNextArrow@phaeez`} id={id}/>
                };
                if(isHasSliderArrow == '1'){
                    settings.arrows = true
                }else if(isHasSliderArrow == '0'){
                    settings.arrows = false
                }
                if(sliderType && sliderType != '1'){
                    settings.autoplay = true
                    settings.autoplaySpeed = sliderSpeed
                    if(sliderType == '3' || sliderType == '4'){
                        settings.rtl = true
                    }
                }else{
                    settings.autoplay = false
                }
                content = (

                    <div className="img-view-extend">
                        <div className="middle-container" ref={(ref)=>{this.handlerSliderOnLoad(ref)}}>
                            {
                                (layoutType == '1')|| (layoutType == '2' && items.length > slidesToShow_h) ? (
                                    <Slider ecId={`${this && this.props && this.props.ecId || ''}_Slider@j2ntcz`} {...settings}>

                                        {
                                            items.map((item,index)=>{
                                                return (
                                                    <div style={{outline:'none'}}>
                                                        <div className="img-item" style={{height:imgItemContainerHeight}}>
                                                            <div className="middle-box"></div>
                                                            <div className="img-item-content" style={{width: isAutoWidth == '0' ? width : 'auto',height: isAutoHeight == '0' ? height : 'auto',cursor:item.setting.url?'pointer':'default'}} onClick={()=>{this.handlerImgOnClick(item,index)}}>
                                                                <img className="img-item-icon" style={{width: isAutoWidth == '0' ? '100%' : 'auto',height: isAutoHeight == '0' ? '100%' : 'auto'}} src={item.setting.img}/>

                                                                {
                                                                    isShowTitle == '1' ? (
                                                                        <div className="img-item-title" style={{'fontSize':titleFontSize+'px'}}>{item.setting.title}</div>
                                                                    ) : null
                                                                }
                                                            </div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }

                                    </Slider>
                                ) : (
                                    items.map((item,index)=>{
                                        return (
                                            <div style={{outline:'none'}}>
                                                <div className="img-item" style={{height: isAutoHeight == '0' ? imgItemContainerHeight : 'auto'}}>
                                                    <div className="img-item-content" style={{width: isAutoWidth == '0' ? width : 'auto',height: isAutoHeight == '0' ? height : 'auto',cursor:item.setting.url?'pointer':'default'}} onClick={()=>{this.handlerImgOnClick(item,index)}}>
                                                        <img className="img-item-icon" style={{width: isAutoWidth == '0' ? '100%' : 'auto',height: isAutoHeight == '0' ? '100%' : 'auto'}} src={item.setting.img}/>

                                                        {
                                                            isShowTitle == '1' ? (
                                                                <div className="img-item-title" style={{'fontSize':titleFontSize+'px'}}>{item.setting.title}</div>
                                                            ) : null
                                                        }
                                                    </div>
                                                    <div className="middle-box"></div>
                                                </div>
                                            </div>
                                        )
                                    })
                                )
                            }

                        </div>
                        <div className="middle-box"></div>
                    </div>

                )

                viewerImgs = (
                    <ul id={`images-${id}`}>
                        {
                            items.map((item,index)=>{
                                return (
                                    <li><img className={`image-item-icon-${index}`} src={item.setting.img} /></li>
                                )
                            })
                        }
                    </ul>
                )


            }
        }




        return (
            <div style={{height:'100%'}}>
                {content}
                <div style={{display:'none'}}>
                    <img id={`image-${id}`} alt="Picture"/>
                </div>
                <div style={{display:'none'}} onLoad={()=>{
                    this.viewer = new Viewer(document.getElementById(`image-${id}`), {
                        viewed() {
                            viewer.zoomTo(1);
                        },
                        // title: [4, (image, imageData) =>`${image.alt} (${imageData.naturalWidth} × ${imageData.naturalHeight})`]
                    })
                    let gallery = new Viewer(document.getElementById(`images-${id}`))
                }}>
                    {
                        viewerImgs
                    }
                </div>


            </div>
        )
    }
}